<template>
    <div class="mui-content mui-scroll-wrapper mui-slider-group" >
        <div class="mui-scroll">
            <div class="lineItem">
                <CrossLine></CrossLine>
                <div class="panle carlist">
                    <div class="c">
                        <ul>
                            <li>
                                <div class="lst">
                                    <div class="lstImg" v-if="list.pic==null || list.pic==''">
                                        <img src="static/img/noCarPic.png"> 
                                    </div>
                                    <div class="lstImg" v-else>
                                        <img v-lazy="$store.state.appData.imgUrl+list.pic">
                                    </div>  
                                    <div class="lstMsg">
                                        <p class="carName">{{list.carName}}</p>
                                        <p class="carColor">颜色:<span>{{list.color}}</span></p>
                                        <p class="carPrice">指导价:{{list.guidePrice}}万起</p>
                                        <p class="carPrice">最新报价:{{list.bidPrice}}起</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <CrossLine></CrossLine>
                <div class="schedule">
                    <!-- 询价规则，法律条款 -->
                    <ul class="mui-table-view mui-table-view-chevron clause">
                        <li style="margin:0px 0px 0px 15px;">
                            <div class="mui-input-row" style="border-bottom:1px solid #e9e9e9;">
                                <label>价格：</label>
                                <form id="number_form">
                                    <input  style="padding:8px 0px 10px 0px ;font-size:0.7rem;" name="number" type="text"  maxlength="8"  v-model.number="carParams.preferential" class="mui-input-clear" placeholder="请输入期望价格(单位元)">
                                    <error v-show="validated_status"></error>
                                </form>
                            </div>
                        </li>
                        <li style="margin:0px 0px 0px 15px;">
                            <div class="mui-input-row" style="border-bottom:1px solid #e9e9e9;">
                                <label>备注：</label>
                                <form>
                                    <input style="padding:8px 0px 10px 0px ;font-size:0.7rem;" v-model="list.remark" maxlength="20" type="text" class="mui-input-clear" placeholder="选填：用户可留言">
                                </form>
                            </div>
                        </li>
                        <!-- 拼价规则组件 -->
                        <rules :rulesData="rulesData" v-on:switchRulesCheckStatus="switchRulesCheckStatus"></rules>
                        <!-- <div  class="tab-item" style="border-top: none;">
                             <div  class="tab-item-ipt">
                                <a  class="mui-checkbox mui-left">
                                    <input  name="checkbox" type="checkbox" value="bidding" style="left: 0px;top:-8px">
                                </a>
                            </div>
                            <div class="tab-item-left" @tap="switchRulesStatus">
                                <p>我已同意《拼单规则》
                                    <span class="icon-more"></span>
                                </p>
                            </div>       
                        </div>
                        <div  class="tab-item" style="border-top: none;">
                             <div  class="tab-item-ipt">
                                <a  class="mui-checkbox mui-left">
                                    <input  name="checkbox" type="checkbox" value="clause" style="left: 0px;top:-8px">
                                </a>
                            </div>
                            <div class="tab-item-left" @tap="switchRulesStatus">
                                <p>我已同意《服务条款》
                                    <span class="icon-more"></span>
                                </p>
                            </div>       
                        </div> -->
                    </ul>
                </div>
            </div>
        </div>
        <div class="affirm">
            <div class="afm" :style="{'background':confirm?'#ff6a27':'#b2b2b2'}" @tap="intoFutures">确定</div>
        </div>
    </div>
</template>

<script>
    /* 条款这里要拆分事件 ，是bug */
    import CrossLine from '@/components/base/cross-line/cross-line'
    import mui from "static/js/mui"
    import { validated, validatedError }from '@/utils/validator'
    import Error from "@/components/base/form-status/error"
    import rules from "@/components/base/rules-clause/rules-clause"
    import storage from "@/utils/localstorage"
    import utils from '@/utils/utils'
    import {editBidCarAndShareBill} from '@/api/order'
    import { Toast } from 'mint-ui'

    export default {
        components: {
            CrossLine, Error, rules
        },
        data() {
            return {
                biddingStatus: false,
                /* clauseStatus: false, */
                rulesStatus: false,
                clauseTextStatus: false,
                confirm: false,
                carParams:{
                    carId: '',
                    customerId: '',
                    preferential: null,
                    remark: ''
                },
                list:{},
                //传入规则变量参数
                rulesData:{
                    name:'拼单',
                    clause: '',
                    rule: ''
                },
                /* 下浮询价的10% */
                number_option:[
                    {
                    name: 'number',
                    display:"你输入的不是合法价格|价格必填|价格太长",
                    rules: 'is_money|required||max_length(8)'
                    }
                ],
                validated_status: false
            }
        },
        props: {},
        watch: {
            carParams: {
                handler:function(val,oldval){
                    if (this.biddingStatus == true && this.carParams.preferential) {
                        this.confirm = true;
                    } else {
                        this.confirm = false;
                    }
                },
                deep:true
            }
        },
        methods: {
            switchRulesCheckStatus(status){
                this.biddingStatus = status
                if (this.biddingStatus == true && this.carParams.preferential) {
                    this.confirm = true;
                } else {
                    this.confirm = false;
                }
            },
            init() {
                this.rulesData.clause = storage.getLocalstorage('globalConfig')[2]
                this.rulesData.rule = storage.getLocalstorage('globalConfig')[1]
            },
            handleClauseTextStatus() {
                if(this.rulesStatus == true){
                    this.clauseTextStatus = false
                }
                return this.clauseTextStatus
            },
            switchClauseTextStatus() {
                this.clauseTextStatus = !this.clauseTextStatus
            },
            switchRulesStatus() {
                this.rulesStatus = !this.rulesStatus
            },
            formart_price(value) {
                let price  = value / 100
                return price
            },
            intoFutures(){
                if (this.confirm == true) {
                    //不能小于报价的50%且不能大于50%
                    let min = this.list.bidPrice * 0.5
                    let max = this.list.bidPrice * 1.5
                    if(min > this.carParams.preferential || max < this.carParams.preferential) {
                        this.validated_status = true
                        Toast('价格输入有误')
                        return
                    }
                    //验证处理,返回错误信息
                    let errors = validated('number_form',this.number_option)
                    //根据错误生成input状态
                    if(errors.length == 0){
                        this.validated_status = false
                        //ajax
                        this.getCarParams()             
                    }else{
                        this.validated_status = true
                    }
                } else{
                    let msg = ''
                    /* if(!this.clauseStatus){
                        msg = msg +'请勾选法律条款,'
                    } */
                    if(!this.biddingStatus){
                        msg = msg +'请勾选拼单规则,'
                    }
                    if(!this.carParams.preferential){
                        msg = msg +'请填写期望价格,'
                    }
                    msg = msg.substring(0,msg.length-1)
                    if(msg){
                        Toast(msg)
                    }
                }
            },
            //从订单转入期货拼单
            getParams() {
                //获取路由参数'
                let routeVal = this.$route.params
                // //console.log(routeVal);
                if (JSON.stringify(routeVal) !== "{}") {
                    if (routeVal.carParams) {
                        let Base64 = require('js-base64').Base64
                        this.list = routeVal.carParams
                        this.carParams.carId = routeVal.carParams.carId
                        this.carParams.customerId = routeVal.customerId
                        this.carParams.orderId = routeVal.orderId
                        this.carParams.remark = routeVal.carParams.remark
                        this.carParams.salerId =  Base64.encode(routeVal.salerId)
                    }
                }
            },
            getCarParams() {
                let that = this
                editBidCarAndShareBill(this.carParams).then(res => {
                    mui.alert('转入拼单成功！', '提示', ['确定'], function() {
                        that.$router.push({
                            path: "/orderNavigate/crowdOrder"     
                        })
                    },'div')
                })
            }
        },
        filters: {},
        computed: {},
        created() { 
            this.getParams()
            this.init()
        },
        mounted() {
            let that = this;
            //判断input框是否都有选中 选中则可点亮确认按钮
            /* mui(".clause").on("change", "input", function () {
                let status = this.checked ? true : false;
                if (this.value == "bidding") {
                    that.biddingStatus = status;
                    //console.log(that.biddingStatus)
                }
        
                if (that.biddingStatus == true && that.carParams.preferential) {
                    that.confirm = true;
                } else {
                    that.confirm = false;
                }
            }); */
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
        },
        destroyed() { }
    }

</script>

<style lang="scss" scoped>
    .mui-input-row label {
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        line-height: 1.1;
        float: left;
        width:15%;
        padding:12px 0px 10px 0px;
        font-size:0.7rem;
    }
    .mui-input-row label ~ form,.mui-input-row label ~ form input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {
        float: left;
        width:85%;
        margin-bottom: 0;
        padding-left: 0;
        border: 0;
    }
    /*图标默认设置样式*/
    .i-c {
        font-size: 1.1rem;
        position: relative;
        top: 5px;
        right: 5px;
    }
    /*车型选择*/

    .carlist {
        width: 100%;
        .lst {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 10px 12px 0px 12px;
            .lstImg {
                width: 38%;
                float: left;
                height: 90px;
                background-color: #fff;
                text-align: left;
                img {
                    height: 100%;
                    vertical-align: middle;
                }
            }
            .lstMsg {
                width: 62%;
                float: left;
                height: 100%;
                padding: 6px 0px 5px 15px;
                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: normal;
                    margin-bottom: 10px;
                }
            }
        }
        .lstbottom {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 0px 12px 0px 12px;
            p {
                margin-bottom: 0px;
                line-height: 35px;
            }
        }
    }
    /*名字字段*/

    .carName {
        font-size: 0.7rem;
        color: #333;
        line-height: 15px;
        height: 28px;
    }
    /*颜色字段*/

    .carColor {
        font-size: 0.6rem;
        line-height: 15px;
    }
    /*价格字段*/

    .carPrice {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .schedule {
        background: #fff;
    }
    /**确认按钮*/

    .affirm {
        width: 100%;
        position: absolute;
        bottom: 0px;
        z-index:5;
        .afm {
            height: 40px;
            border: 1px solid #ddd;
            background-color: #b2b2b2;
            margin: 0 auto;
            color: #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 40px;
            font-size:15px;
        }
    }
    /**我已同意的样式*/

    .mui-table-view-cell {
        font-size: 0.7rem;
    }

    .mui-table-view-cell:before {
        height: 1px !important;
    }

    .mui-navigate-right:after {
        transform: rotate(90deg);
        font-size: 0.9rem;
    }

    .mui-checkbox input[type="checkbox"] {
        position: absolute;
        top: 5px;
        right: 20px;
        display: inline-block;
        width: 28px;
        height: 26px;
        border: 0;
        outline: 0 !important;
        background-color: transparent;
        -webkit-appearance: none;
    }

    .mui-checkbox input[type="checkbox"] {
        position: absolute;
        top: 4px;
        right: 20px;
        display: inline-block;
        width: 28px;
        height: 26px;
        border: 0;
        outline: 0 !important;
        background-color: transparent;
        -webkit-appearance: none;
        margin-top: 7px;
    }

    .mui-checkbox input[type="checkbox"]:before {
        font-family: Muiicons;
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
        text-decoration: none;
        color: #aaa;
        border-radius: 0;
        background: none;
        -webkit-font-smoothing: antialiased;
    }

    .mui-checkbox input[type="checkbox"]:checked:before {
        content: "\e442";
    }

    .mui-checkbox input[type="checkbox"]:checked:before {
        color: #ff6a27;
    }

    .mui-checkbox input[type="checkbox"]:before {
        font-family: Muiicons;
        font-size: 28px;
        font-weight: normal;
        line-height: 1;
        text-decoration: none;
        color: #aaa;
        border-radius: 0;
        background: none;
        -webkit-font-smoothing: antialiased;
    }

    .mui-checkbox span {
        height: 26px;
        line-height: 25px;
        position: relative;
        top: 2px;
        left: 34px;
    }

    .mui-radio.mui-left input[type="radio"],
    .mui-checkbox.mui-left input[type="checkbox"] {
        left: 14px;
    }

    .mui-navigate-right:after,
    .mui-push-left:after,
    .mui-push-right:after {
        top: 35% !important;
    }
    /* 规则 */
    .rules{
        background: #fff;
    }
    .rules p{
        font-size:12px;
        padding:20px;
        padding-bottom:10px;
        padding-top:10px;
        margin-bottom:0px;
    }
    /* 条款 */
    .clauseText{
        background: #fff;
    }
    .clauseText p{
        font-size:12px;
        padding:20px;
        padding-bottom:10px;
        padding-top:10px;
        margin-bottom:0px;
    }
    .mui-scroll-wrapper{
        padding-bottom:40px;
    }
    .mui-bar-nav ~ .mui-content {
    padding-top: 0px;
    }




    .tab-item{
        width:100%;
        background:#fff;
        overflow:hidden;
        padding:12px 12px 12px 0px;
        padding-right:15px;
        margin: 0px 10px 0px 15px;
        border-bottom: 1px solid rgb(233, 233, 233);
        .tab-item-left{
            float:left;
            width:90%;
            height:27px;
            margin-left:35px;
            p{
                line-height:27px;
                padding-bottom:0px;
                font-size:0.7rem;
                margin-bottom:0px;
                color: #333333!important;
            }
        }
        .tab-item-right{
            float:right;
            width:42%;
        height:90px; 
            text-align:center;
            img{
                height:100%;
            }
        }
        .tab-item-ipt{
            width:10%;
            float:left;

        }
    }
    .icon-more{
        float:right;
        color:#c8c7cc;
        margin-top:5px;
        font-size: 1rem;
        margin-right:5%;
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg); 	/* Opera */
    }

</style>